<template>
    <div class="policeCampCulture" v-show="leftList.length || rightList.length">
        <div class="flex" v-show="leftList.length">
            <div class="label rightlabel" :class v-for="item, index  in leftList" :key="index"
                @click="getswiperSlideLeft(item, index)">
                {{ item.carouselChartTypeName }}
            </div>
        </div>
        <div class="slide">
            <Slideshow v-if="resetSwiper" :swiperSlide="swiperSlide" :isNeedTitle="true" :isNeedBoxShadow="true">
            </Slideshow>
        </div>
        <div class="flex" v-show="rightList.length">
            <div class="label rightlabel" :class v-for="item, index  in rightList" :key="index"
                @click="getswiperSlideRight(item, index)">
                {{ item.carouselChartTypeName }}
            </div>
        </div>
    </div>
</template>
<script>
import Slideshow from "./slideshow" //轮播
import homepageApi from '@/api/homepage';
import $baseUrl from '@/utils/baseURL';
export default {
    name: 'App',
    components: { Slideshow },
    data() {
        return {
            url: require("../assets/banner.png"),
            swiperSlide: [],
            leftList: [],
            rightList: [],
            resetSwiper: false,
            chartTypeIndex: 0,
        }
    },
    mounted() {
        this.queryCarouselChartType();
    },
    methods: {
        getswiperSlideLeft(item, index) {
            if (index > 0) {
                let length = this.leftList.length;
                let sliceArr = this.leftList.slice(index, length);
                this.rightList = sliceArr.concat(this.rightList);
                this.leftList = this.leftList.slice(0, index);
                this.queryCarouselChart();
            }
        },
        getswiperSlideRight(item, index) {
            let sliceArr = this.rightList.slice(0, index + 1);
            this.leftList = this.leftList.concat(sliceArr);
            this.rightList = this.rightList.slice(index + 1);
            this.queryCarouselChart();
        },
        async queryCarouselChartType() {
            let { data } = await homepageApi.queryCarouselChartType();
            let list = data || [];
            this.getPromiseList(list)

        },
        async getPromiseList(list) {
            let promiseList = [];
            list.forEach(item => {
                promiseList.push(homepageApi.queryCarouselChart(item.carouselChartTypeId))
            });
            let resList = await Promise.all(promiseList)
            let tagList = []
            resList.forEach((item, index) => {
                if (item.data.length > 0) {
                    tagList.push(list[index])
                }
            })
            if (tagList.length > 0) {
                this.leftList = [tagList[0]]
                this.rightList = tagList.slice(1, tagList.length);
                this.queryCarouselChart()
            }
        },
        async queryCarouselChart() {
            this.resetSwiper = false;
            this.swiperSlide = [];
            let carouselChartTypeId = '';
            if (this.leftList.length > 0) {
                let index = this.leftList.length - 1
                carouselChartTypeId = this.leftList[index].carouselChartTypeId
            } else {
                return
            }
            let { data } = await homepageApi.queryCarouselChart(carouselChartTypeId)
            let list = data || [];
            this.$nextTick(() => {
                this.resetSwiper = true;
                this.swiperSlide = list.map(item => {
                    return {
                        ...item,
                        imgUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.filesId}`
                    }
                });
            })
        },
    }
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
    font-size: 0;
}

.policeCampCulture {
    margin: 20px 0;
    width: 100%;
    height: 170px;
    display: flex;
    justify-content: space-between;

    .flex {
        display: flex;
        justify-content: flex-start;

        .label {
            margin-right: 4px;
        }
    }

    .label {
        width: 60px;
        height: 100%;
        background-color: #0777ff;
        border-radius: 10px 0px 0px 10px;
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

    .rightlabel {
        border-radius: 0px 10px 10px 0px;
    }

    .slide {
        width: calc(100% - 70px);
        height: 100%;
    }
}
</style>